<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/jinrishuju.css" th:href="@{/css/jinrishuju.css}" rel="stylesheet"/>
</head>

<body class="gray-bg" style="overflow-x: scroll" >
                    <div class="ibox-content no-padding">
                        <div class="panel-body">
                            <div class="box3" th:if="${session.QuanXian == 1}">
                                <div class="a" style="top: 3%">今日销量</div>
                                <div class="b" style="top: 9%;left: 3%">排名</div>
                                <div class="b" style="top: 9%;left: 16%">店铺名称</div>
                                <div class="b" style="top: 9%;left: 42%">商品名称</div>
                                <div class="b" style="top: 9%;left: 70%">销量</div>
                                <div class="b" style="top: 9%;left: 80%">销售金额</div>
                                <div class="i" style="height: 3px;width: 500px;top:12%;left: 2%"></div>
                                <div th:each="goods,goodStat:${session.Xiaoliangpaihang}">
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:5%'" th:text="${goods.getId()}">排名</div>
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:13%'" th:text="${goods.getChukuCangku()}">店铺名称</div>
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:40%'" th:text="${goods.getGoodName()}">商品名称</div>
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:70%'" th:text="${ #numbers.formatInteger(goods.getTotalshuliang(),0)  }">销量</div>
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:81%'" th:text="${goods.getTotaljiner()}">销售金额</div>
                                </div>

                                <div class="a" style="top: 65%">今日出勤情况</div>
                                <div class="b" style="top: 71%;left: 9%">店名</div>
                                <div class="b" style="top: 71%;left: 40%">人数</div>
                                <div class="b" style="top: 71%;left: 70%">备注</div>
                                <div class="i" style="height: 3px;width: 500px;top:75%;left: 2%"></div>
                                <div th:each="yuangong,yuangongState:${session.Yuangong}">
                                    <div class="b" th:style="'top:'+${(yuangongState.index)*6+78}+'%;'+'left:9%'" th:text="${yuangong.getDianming()}">店名</div>
                                    <div class="b" th:style="'top:'+${(yuangongState.index)*6+78}+'%;'+'left:40%'" th:text="${yuangong.getRenshu()}">人数</div>
                                    <div class="b" th:style="'top:'+${(yuangongState.index)*6+78}+'%;'+'left:70%'" th:text="${yuangong.getBeizhu()}">备注</div>

                                </div>

                            </div>
                            <div class="box3" th:if="${session.QuanXian == 0}">
                                <div class="a" style="top: 3%">今日销量</div>
                                <div class="b" style="top: 9%;left: 6%">排名</div>
                                <div class="b" style="top: 9%;left: 26%">商品名称</div>
                                <div class="b" style="top: 9%;left: 55%">销量</div>
                                <div class="b" style="top: 9%;left: 75%">销售金额</div>
                                <div class="i" style="height: 3px;width: 500px;top:12%;left: 2%"></div>
                                <div th:each="goods,goodStat:${session.Xiaoliangpaihang}">
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:7%'" th:text="${goods.getId()}">排名</div>
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:26%'" th:text="${goods.getGoodName()}">商品名称</div>
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:55%'" th:text="${ #numbers.formatInteger(goods.getTotalshuliang(),0)  }">销量</div>
                                    <div class="b" th:style="'top:'+${(goodStat.index)*5+14}+'%;'+'left:77%'" th:text="${goods.getTotaljiner()}">销售金额</div>
                                </div>

                                <div class="a" style="top: 70%">今日出勤情况</div>
                                <div class="b" style="top: 76%;left: 9%">店名</div>
                                <div class="b" style="top: 76%;left: 40%">人数</div>
                                <div class="b" style="top: 76%;left: 70%">备注</div>
                                <div class="i" style="height: 3px;width: 500px;top:80%;left: 2%"></div>
                                <div th:each="yuangong,yuangongState:${session.Yuangong}">
                                    <div class="b" th:style="'top:'+${(yuangongState.index)*6+83}+'%;'+'left:9%'" th:text="${yuangong.getDianming()}">店名</div>
                                    <div class="b" th:style="'top:'+${(yuangongState.index)*6+83}+'%;'+'left:40%'" th:text="${yuangong.getRenshu()}">人数</div>
                                    <div class="b" th:style="'top:'+${(yuangongState.index)*6+83}+'%;'+'left:70%'" th:text="${yuangong.getBeizhu()}">备注</div>

                                </div>

                            </div >
                            <!--今日销量结束-->
                            <div hidden id="session3value" th:text="${session.xiaoshouChukuJiner}"></div>
                            <div hidden id="session4value" th:text="${session.gouhuorukuJiner}"></div>
                            <div hidden id="session5value" th:text="${session.WeiFu4KeHu}"></div>
                            <div hidden id="session6value" th:text="${session.YiHuan4KeHu}"></div>
                            <div hidden id="session7value" th:text="${session.Rukujiner}"></div>
                            <div hidden id="session8value" th:text="${session.Chukujiner}"></div>
                            <div class="box1">
                                <div class="a">今日数据</div>
                                <div class="i" style="height: 3px;width: 700px;top:30%;left: 4%"></div>
                            <svg id="mysvg" width="850" height="600"></svg>
                            <script>

                                var thesvg=document.getElementById("mysvg");
                                var rec = [];
                                var tex = [];
                                var nam = [];
                                var shopnam1 = [];
                                var shopnam2 = [];
                                var shopnam3 = [];
                                var shopnama = ["北联店","888","0","999","576"];
                                var shopnamb = ["安吉店","8866","0","900","789"];
                                var shopnamc = ["陆川店","9966","0","757","456"];
                                var money=[0,0,0,0];
                                var name1=["店名","销售金额","客户未还款","采购总金额","利润金额"]
                                var msgv = document.getElementById("session3value").innerText;
                                var msgv1 = document.getElementById("session4value").innerText;
                                var msgv2 = document.getElementById("session5value").innerText;
                                var msgv3 = document.getElementById("session6value").innerText;

                                if (msgv !== null && msgv !==""){
                                    //销售用3，未还用5，采购用4，利润是销售减采购
                                    var xiaoshou4dian = msgv.split("@")
                                    for (let i = 0; i < xiaoshou4dian.length; i++) {
                                        var subStr_ = xiaoshou4dian[i].split(":")
                                        switch (i) {
                                            case 1:
                                                shopnama[0]=subStr_[0]
                                                shopnama[1]=subStr_[1].replace(";","")
                                                break
                                            case 2:
                                                shopnamb[0]=subStr_[0]
                                                shopnamb[1]=subStr_[1].replace(";","")
                                                break
                                            case 3:
                                                shopnamc[0]=subStr_[0]
                                                shopnamc[1]=subStr_[1].replace(";","")
                                                break
                                            default:
                                                break
                                        }
                                    }
                                if (msgv2 !== null && msgv2 !==""){

                                    var str2all = msgv2.split("]com.ruoyi.qiankuantongji.domain.chaxunRuselt@")

                                    var str2jiner = 0;
                                    for (let i = 0; i < str2all.length; i++) {
                                        var str2cangku = str2all[i].split("cangku=")[1].split("店")[0]+"店"
                                        str2jiner = str2all[i].split("jiner=")[1]

                                        switch (str2cangku) {
                                            case shopnama[0]:
                                                shopnama[2]=str2jiner.split(" ")[0]
                                                break
                                            case shopnamb[0]:
                                                shopnamb[2]=str2jiner.split(" ")[0]
                                                break
                                            case shopnamc[0]:
                                                shopnamc[2]=str2jiner.split(" ")[0]
                                                break
                                            default:
                                                break
                                        }

                                    }
                                }
                                if (msgv1 !== null && msgv1 !==""){
                                        var caigou4dian = msgv1.split("@")
                                        for (let j = 0; j < caigou4dian.length; j++) {
                                            var _subStr_ = caigou4dian[j].split(":")
                                            switch (_subStr_[0]) {
                                                case shopnama[0]:
                                                    shopnama[3]=_subStr_[1].replace(";","")
                                                    break
                                                case shopnamb[0]:
                                                    shopnamb[3]=_subStr_[1].replace(";","")
                                                    break
                                                case shopnamc[0]:
                                                    shopnamc[3]=_subStr_[1].replace(";","")
                                                    break
                                                default:
                                                    break
                                            }
                                        }
                                }
                                if (msgv1 !== null && msgv1 !==""){

                                    for (let j = 0; j < xiaoshou4dian.length; j++) {
                                        subStr_ = xiaoshou4dian[j].split(":")
                                        _subStr_ = caigou4dian[j].split(":")
                                        switch (_subStr_[0]) {
                                            case shopnama[0]:
                                                shopnama[4]=subStr_[1].replace(";","") - _subStr_[1].replace(";","")
                                                break
                                            case shopnamb[0]:
                                                shopnamb[4]=subStr_[1].replace(";","") - _subStr_[1].replace(";","")
                                                break
                                            case shopnamc[0]:
                                                shopnamc[4]=subStr_[1].replace(";","") - _subStr_[1].replace(";","")
                                                break
                                            default:
                                                break
                                        }
                                    }
                                }
                                }

                                if (msgv !== null && msgv !==""){
                                    var a = 0;
                                    if (msgv.search(";")!==-1){
                                        var strlist = msgv.split(";")
                                        for (var sti of strlist) {
                                            // console.log(sti)
                                            if (sti !== '' && sti !== null){
                                                //console.log(1)
                                                a += parseInt(sti.split(":")[1]);
                                            }
                                        }
                                        money.splice(0,1,a)
                                    }else {
                                        //console.log(3)
                                        money.splice(0,1,0)
                                    }
                                    var a1 = 0;
                                    if (msgv1.search(";")!==-1){
                                        var strlist = msgv1.split(";")
                                        for (var sti of strlist) {
                                            // console.log(sti)
                                            if (sti !== '' && sti !== null){
                                                // console.log(1)
                                                a1 += parseInt(sti.split(":")[1]);
                                            }
                                        }
                                        money.splice(3,1,a1)
                                    }else {
                                        // console.log(3)
                                        money.splice(3,1,0)
                                    }
                                    console.log(money)

                                    money.splice(1,1,parseFloat(msgv2))
                                    money.splice(2,1,parseFloat(msgv3))
                                    var moneyall = 0;
                                    for (i = 0; i<money.length; i++){
                                        moneyall +=money[i];
                                    }

                                    for (i = 0; i < name1.length; i++) {
                                        rec[i]=document.createElement("rect");
                                        tex[i]=document.createElement("text");
                                        nam[i]=document.createElement("text");
                                        shopnam1[i]=document.createElement("text");
                                        shopnam2[i]=document.createElement("text");
                                        shopnam3[i]=document.createElement("text");
                                        thesvg.appendChild(nam[i]);
                                        thesvg.appendChild(rec[i]);
                                        thesvg.appendChild(tex[i]);
                                        thesvg.appendChild(shopnam1[i]);
                                        thesvg.appendChild(shopnam2[i]);
                                        thesvg.appendChild(shopnam3[i]);


                                        var width=Math.floor(money[i])/moneyall*640;
                                        var blank=80;var height=60;
                                        shopnam1[i].outerHTML="<text style='fill: rgb("+(width%255)+",60,60);font-size: 16px;font-family: Verdana;text-align: right;' x="+(2.5*height*i+blank-35)+" y=140>"+shopnama[i];
                                        shopnam2[i].outerHTML="<text style='fill: rgb("+(width%255)+",60,60);font-size: 16px;font-family: Verdana;text-align: right;' x="+(2.5*height*i+blank-35)+" y=200>"+shopnamb[i];
                                        shopnam3[i].outerHTML="<text style='fill: rgb("+(width%255)+",60,60);font-size: 16px;font-family: Verdana;text-align: right;' x="+(2.5*height*i+blank-35)+" y=260>"+shopnamc[i];
                                        nam[i].outerHTML="<text style='fill: rgb("+(width%255)+",60,60);font-size: 16px;font-family: Verdana;text-align: right;' x="+(2.5*height*i+blank-35)+" y=80>"+name1[i];
                                        // rec[i].outerHTML="<rect x=100 y="+(height*i+blank)+" width="+width+" height=30 style='fill: rgb("+(width%255)+",60,60); opacity: 0.8'>"
                                        // tex[i].outerHTML="<text style='font-size: 16px;font-family: Verdana' x="+(width*i+blank+20)+">"+money[i]
                                }
                                }
                            </script>
                            </div>
                            <div class="box2">
                                <div style="margin-left: 50px;margin-top: 20px;margin-bottom: 0px">
                                    <h3> 销货 | 购货 </h3>
                                </div>
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="main" style="width:90%;height:90%;margin: 10px 0px">

                                </div>
                                <!-- ;margin-top:80px;控制距离顶部距离 -->
                                <div id="main2" style="width:90%;height:90%;margin: 10px 0px">

                                </div>
                                <!-- ECharts单文件引入 -->
                                <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
                                <script type="text/javascript">



                                    // 获取当前日期
                                    var date = new Date();
                                    var month = date.getMonth()+1;
                                    var day = date.getDate();
                                    xdate = []; // x轴日期
                                    var temp;
                                    for (var i = 0; i < 6; i++) {
                                        temp = month + "月" + (day - i) + "日";
                                        xdate.unshift(temp)
                                    }

                                    // 获取后台数据
                                    var Rukujiner = document.getElementById("session7value").innerText;
                                    var Chukujiner = document.getElementById("session8value").innerText;

                                    var xiaohuo = [0.0,0.0,0.0,0.0,0.0,0.0];
                                    var gouhuo = [0.0,0.0,0.0,0.0,0.0,0.0];

                                    if (Rukujiner !== null&&Rukujiner !==""){
                                        Rukujiner = Rukujiner.substring(1,Rukujiner.length-1)
                                        Chukujiner = Chukujiner.substring(1,Chukujiner.length-1)

                                        Rukujiner = Rukujiner.split(",");
                                        Chukujiner = Chukujiner.split(",");

                                        for (let i = 0; i < Rukujiner.length; i++) {
                                            datex = Rukujiner[i].split("@")[0].trim()
                                            jinerx = Rukujiner[i].split("@")[2]
                                            indexx = xdate.indexOf(datex)
                                            gouhuo.splice(indexx,1,parseFloat(jinerx).toFixed(1)/10000)
                                        }


                                        for (let i = 0; i < Chukujiner.length; i++) {
                                            datex = Chukujiner[i].split("@")[0].trim()
                                            jinerx = Chukujiner[i].split("@")[2]
                                            indexx = xdate.indexOf(datex)
                                            xiaohuo.splice(indexx,1,parseFloat(jinerx).toFixed(1)/10000)
                                        }

                                        // 路径配置
                                        require.config({
                                            paths: {
                                                echarts: 'http://echarts.baidu.com/build/dist'
                                            }
                                        });

                                        // 使用
                                        require(
                                            [
                                                'echarts',
                                                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                                                'echarts/chart/line'
                                            ],
                                            function (ec) {
                                                // 基于准备好的dom，初始化echarts图表
                                                var myChart = ec.init(document.getElementById('main'));
                                                var myChart2 = ec.init(document.getElementById('main2'));

                                                var option = { //具体细节的描述
                                                    title: {
                                                        text: '',
                                                        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                                                            fontSize: 14,
                                                            fontStyle: 'normal',
                                                            fontWeight: 'bold',
                                                        },
                                                    },
                                                    tooltip: {
                                                        trigger: 'axis'
                                                    },
                                                    legend: {
                                                        data: ['销货', '购货']
                                                    },
                                                    toolbox: { //可以选择具体数据，柱状图，折线图，还原，保存图片的的切换选择
                                                        show: true,
                                                        feature: {
                                                            /*dataView: {
                                                                show: true,
                                                                readOnly: false
                                                            },*/
                                                            magicType: {
                                                                show: true,
                                                                type: ['line', 'bar'] //可选折线图和柱状图
                                                            },
                                                            /*restore: {
                                                                show: true  //恢复默认
                                                            },*/
                                                            /*saveAsImage: {
                                                                show: true // 存储为图片的功能
                                                            }*/
                                                        }
                                                    },
                                                    calculable: true,
                                                    xAxis: [{
                                                        type: 'category',
                                                        //name: 'min_sup(%)'
                                                        data: xdate,
                                                        name: '日期(天)',
                                                        position: 'left'
                                                    }],
                                                    yAxis: [{
                                                        type: 'value',
                                                        name: '金额(万)',
                                                        position: 'left'
                                                    }],
                                                    series: [
                                                        {
                                                            name: '销货',
                                                            type: 'line',// bar
                                                            data: xiaohuo,
                                                            color: '#CC0066'
                                                        },
                                                        {
                                                            name: '购货',
                                                            type: 'line',//bar
                                                            data: gouhuo,
                                                            color: '#009999'
                                                        }
                                                    ]
                                                };

                                                /*var option2 = {
                                                  title: {
                                                    text: 'FAST和FAST_USP算法运行时间对比（大阈值）',
                                                    textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                                                      fontSize: 14,
                                                      fontStyle: 'normal',
                                                      fontWeight: 'bold',
                                                    },
                                                  },
                                                  tooltip: {
                                                    trigger: 'axis'
                                                  },
                                                  legend: {
                                                    data: ['FAST', 'FAST_USP']
                                                  },
                                                  toolbox: {
                                                    show: true,
                                                    feature: {
                                                      dataView: {
                                                        show: true,
                                                        readOnly: false
                                                      },
                                                      magicType: {
                                                        show: true,
                                                        type: ['line', 'bar']
                                                      },
                                                      restore: {
                                                        show: true
                                                      },
                                                      saveAsImage: {
                                                        show: true
                                                      }
                                                    }
                                                  },
                                                  calculable: true,
                                                  xAxis: [{
                                                    type: 'category',
                                                    //name: 'min_sup(%)'
                                                    data: ['1.2', '1.0', '0.8', '0.6','0.4','0.2'],
                                                    name: 'min_sup(%)',
                                                    position: 'left'
                                                  }],
                                                  yAxis: [{
                                                    type: 'value',
                                                    name: '运行时间(s)',
                                                    position: 'left'
                                                  }],
                                                  series: [{
                                                    name: 'FAST',
                                                    type: 'bar',
                                                    data: [19.5, 19.8, 21.7, 25.1,32.5,48.9],
                                                    color: '#CC0066'
                                                  },
                                                    {
                                                      name: 'FAST_USP',
                                                      type: 'bar',
                                                      data: [15.0, 16.6, 17.3, 17.4,19.6,22.7],
                                                      color: '#009999' // 设置颜色
                                                    }
                                                  ]
                                                };*/



                                                // 为echarts对象加载数据
                                                myChart.setOption(option);
                                                // myChart2.setOption(option2);
                                            }
                                        );
                                    }
                                </script>
                            </div>
                            <div class="box4">
                                <div class="c" id="name2cangku1"></div>
                                <div class="c" id="name2cangku2" style="left: 450px"></div>
                                <div class="c" id="name2cangku3" style="left: 900px"></div>
                                <div>
                                    <canvas id="canvas_circle1" width="380" height="240"  style="position: absolute;left: 50px">
                                    </canvas>
                                    <canvas id="canvas_circle2" width="380" height="240"  style="position: absolute;left: 480px">
                                    </canvas>
                                    <canvas id="canvas_circle3" width="380" height="240"  style="position: absolute;left: 920px">
                                    </canvas>
                                    <script>

                                    var cangku_names = [];
                                    var kucuns1 = [];
                                    var kucuns2 = [];
                                    var kucuns3 = [];
                                    var kucuns4= [];
                                    var good_names1 = [];
                                    var good_names2 = [];
                                    var good_names3 = [];
                                    var good_names4 = [];

                                    var kucun = '[[${session.kucun}]]';

                                        kucun = kucun.substring(1,kucun.length-1)
                                        kucun = kucun.split(",")
                                        var count1 = 0
                                        var count2 = 0
                                        var count3 = 0
                                        var count4 = 0
                                        for (var i = 0; i<kucun.length;i++) {
                                            var cangku_name = kucun[i].split("@")[0].trim();
                                            var totalkucun = parseInt(kucun[i].split("@")[1]);
                                            var good_name = kucun[i].split("@")[2].trim();
                                            var kucuns = parseInt(kucun[i].split("@")[3]);
                                            var bili = parseFloat((kucuns/totalkucun).toString()).toFixed(2)

                                            if (cangku_names.indexOf(cangku_name) === -1) {
                                                cangku_names.push(cangku_name)
                                            }

                                            if (i<10) {
                                                count1 += parseFloat(bili)
                                                good_names1.unshift(good_name);
                                                kucuns1.unshift(bili)
                                            }
                                            else if (i<20) {
                                                count2 += parseFloat(bili)
                                                good_names2.unshift(good_name);
                                                kucuns2.unshift(bili)
                                            }
                                            else if (i<30) {
                                                count3 += parseFloat(bili)
                                                good_names3.unshift(good_name);
                                                kucuns3.unshift(bili)
                                            }
                                            else if (i<40) {
                                                count4 += bili
                                                good_names4.unshift(good_name);
                                                kucuns4.unshift(bili)
                                            }
                                        }
                                        console.log(cangku_names)

                                        good_names1.push("其他")
                                        good_names2.push("其他")
                                        good_names3.push("其他")
                                        good_names4.push("其他")
                                        kucuns1.push((1-count1).toFixed(2))
                                        kucuns2.push((1-count2).toFixed(2))
                                        kucuns3.push((1-count3).toFixed(2))
                                        kucuns4.push(1-count4)

                                    console.log(kucuns1)
                                        var color_arr = ["#00c71d", "#FFAA00", "#38B0DE", "#23238E", "#FF6EC7", "#00009C", "#9F9F5F", "#4F2F4F", "#8F8FBD", "#BC8F8F", "#E47833"];

                                        //绘制饼图
                                        function drawCircle(canvasId, data_arr, color_arr, text_arr)
                                        {
                                            var c = document.getElementById(canvasId);
                                            var ctx = c.getContext("2d");

                                            var radius = c.height / 2 - 20; //半径
                                            var ox = radius + 20, oy = radius + 20; //圆心

                                            var width = 30, height = 10; //图例宽和高
                                            var posX = ox * 2 + 10, posY = 30;   //
                                            var textX = posX + width + 5, textY = posY + 10;

                                            var startAngle = 0; //起始弧度
                                            var endAngle = 0;   //结束弧度
                                            for (var i = 0; i < data_arr.length; i++)
                                            {
                                                //绘制饼图
                                                endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
                                                ctx.fillStyle = color_arr[i];
                                                ctx.beginPath();
                                                ctx.moveTo(ox, oy); //移动到到圆心
                                                ctx.arc(ox, oy, radius, startAngle, endAngle, false);
                                                ctx.closePath();
                                                ctx.fill();
                                                startAngle = endAngle; //设置起始弧度

                                                //绘制比例图及文字
                                                ctx.fillStyle = color_arr[i];
                                                ctx.fillRect(posX, posY + 20 * i, width, height);
                                                ctx.moveTo(posX, posY + 20 * i);
                                                ctx.font = 'bold 12px 微软雅黑';    //斜体 30像素 微软雅黑字体
                                                ctx.fillStyle = color_arr[i]; //"#000000";
                                                var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%";
                                                ctx.fillText(percent, textX, textY + 20 * i);
                                            }
                                        }

                                        function init() {
                                            //绘制饼图
                                            //比例数据和颜色
                                            // var data_arr = [0.05, 0.25, 0.6, 0.1];
                                            // var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#ffffff", "#001aff", "#001aff", "#001aff", "#001aff", "#001aff", "#001aff", "#001aff"];
                                            // var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"];

                                            drawCircle("canvas_circle1", kucuns1, color_arr, good_names1);
                                            drawCircle("canvas_circle2", kucuns2, color_arr, good_names2);
                                            drawCircle("canvas_circle3", kucuns3, color_arr, good_names3);
                                            //drawCircle("canvas_circle4", kucuns4, color_arr, good_names4);
                                        }

                                        //页面加载时执行init()函数
                                        window.onload = init;

                                        document.getElementById("name2cangku1").innerHTML = cangku_names[0]
                                        document.getElementById("name2cangku2").innerHTML = cangku_names[1]
                                        document.getElementById("name2cangku3").innerHTML = cangku_names[2]

                                </script>
                                </div>
                            </div>
                        </div>
                    </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">
	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });
    </script>
</body>

</html>
